<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- Demo styles -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .blue-slide {
      background: #4390EE;
    }
    .red-slide {
      background: #CA4040;
    }
    .orange-slide {
      background: #FF8604;
    }
    .swiper-slide {
      line-height: 300px;
      color: #fff;
      font-size: 36px;
      text-align: center;
    }

    .swiper-container {
      background-color: #222222;
    }

  </style>
</head>

<script>
  $(document).ready(function () {
    $('#lastPage').click(function () {
      // mySwiper.slidePrev();
      mySwiper.slideTo(0);
    });

    $('#nextPage').click(function () {
      // mySwiper.slideNext();
      mySwiper.slideTo(2);
    });

    $('#destory').click(function () {
      mySwiper.destroy(true, true);
    });

    $('#addPage').click(function () {
      mySwiper.appendSlide(
        '<div class="swiper-slide blue-slide">\n' +
        '        <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>\n' +
        '      </div>'
      );
    });

    $('#addPage2').click(function () {
      mySwiper.appendSlide(
        [
          '<div class="swiper-slide red-slide">\n' +
          '<p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>\n' +
          '</div>',
          '<div class="swiper-slide orange-slide">\n' +
          '<p class="ani" swiper-animate-effect="shake" swiper-animate-duration="1.5s" swiper-animate-delay="0s">内容</p>\n' +
          '</div>'
        ]
      );
    });

  });
</script>

<body style="background-color: #222222">
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide blue-slide">
        <p  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
        <p  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
        <p  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
        <p  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
        <p  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
        <p  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
      </div>
      <div class="swiper-slide red-slide">
        <p  swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
      </div>
      <div class="swiper-slide orange-slide">
        <p class="ani" swiper-animate-effect="shake" swiper-animate-duration="1.5s" swiper-animate-delay="0s">内容</p>
      </div>
    </div>
  </div>

  <button id="lastPage">上一页</button>
  <button id="nextPage">下一页</button>
  <button id="destory">销毁</button>
  <button id="addPage">添加1个page</button>
  <button id="addPage2">添加2个page</button>
  <!-- Swiper JS -->
  <script src="js/swiper.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var mySwiper = new Swiper('.swiper-container',{
      // on 用来注册事件
      on:{
        init: function(){ // swiper 初始化运行
          swiperAnimateCache(this); //隐藏动画元素
          this.emit('slideChangeTransitionEnd');//在初始化时触发一次slideChangeTransitionEnd事件
        },
        slideChangeTransitionEnd: function(){
          swiperAnimate(this); //每个slide切换结束时运行当前slide动画
          this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');//动画只展示一次
        },
        // 窗口大小更改
        resize: function(){
          this.params.width = window.innerWidth;
          this.update();
        },
        // 页面切换事件
        slideChange: function () {
          console.log(this.activeIndex);
        },
        pagination: {
          el: '.swiper-pagination',
        },
      },

      speed:200,// 页面切换速度
      autoHeight: true, //高度随内容变化，考虑到内部列表高度，可能会用上
      watchOverflow: true,//因为仅有1个slide，swiper无效
      touchMoveStopPropagation : true, // 阻止touchmove冒泡事件
      resistanceRatio:0, // 到边缘时无法再拖动
      // simulateTouch : false,//禁止鼠标模拟
      // allowTouchMove: false,// 禁止鼠标、手机滑动，只能代码动态转变

      // centeredSlides : true, // 左右不再紧贴容器边缘， 配合slidesPerView
      // slidesPerView : 3, // 一次性最多显示几个page
      // spaceBetween : 20, // page之间的间距
      // direction: "vertical",
      // loop: true,
    });

  </script>

</body>
</html>
